<template>
  <div>
    <h3>欢迎来到vue开发的水果店收银系统</h3>
    <table>
      <tr>
        <td>苹果{{ price }}￥/斤,折扣{{ discount }}折</td>
      </tr>
      <tr>
        <td>请输入你想购买的斤数 <input type="text" v-model="num" /></td>
      </tr>
      <tr>
        <td><button @click="add">结账</button></td>
      </tr>
      <tr>
        <td>总价：{{ m }}元，折扣价：{{ sub }}元，省了：{{ n }}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      num: 0,
      discount: 8,
      sub: "",
      m: "",
      n: "",
    };
  },
  methods: {
    add() {
      this.m = this.price * this.num;
      this.sub = this.price * this.num * this.discount * 0.1;
      this.n = this.m - this.sub;
    },
  },
};
</script>

<style scoped sing="less">
h3 {
  text-align: center;
}
table {
  border: 1px solid #333;
  margin: 0 auto;
  width: 500px;
  height: 200px;
}
td {
  text-align: center;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}
</style>
